<template>
	<div>
		<el-dialog width="30%" title="选择电梯注册代码" :visible.sync="innerVisible" append-to-body :before-close='closeScondDilog'>
			<div class="tableBox" v-loading='loading' border header-row-class-name='tableHeader'>
				<el-row :gutter="10">
					<el-col :span="7">
						<div class="colItem">
							<span class="font14 searchCode" style="width: 150px;">维保单位：</span>
							<el-select v-model="mainCompany" placeholder="请选择维保单位" size="mini" clearable>
								<el-option :label="item.value" :value="item.id" v-for="item in mainCompanyArr" :key='item.id'></el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="colItem">
							<span class="font14 searchCode" style="width: 150px;">使用单位：</span>
							<el-select v-model="userCompany" placeholder="请选择使用单位" size="mini" clearable>
								<el-option :label="item.value" :value="item.id" v-for="item in userCompanyArr" :key='item.id'></el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="colItem">
							<span class="font14 searchCode" style="width: 150px;">关键词：</span>
							<el-input size="mini" @keyup.enter.native="find" placeholder="请输入关键词" clearable v-model="searchQuery"></el-input>
						</div>
					</el-col>
					<el-button type="primary" icon="el-icon-search" size="mizi" class='fl'>搜索</el-button>
				</el-row>
				<el-row>
					<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
					 @selection-change="selectChange" style="width: 100%">
						<el-table-column type="index" class="over" fixed>
						</el-table-column>
						<el-table-column type="selection" min-width="50" fixed>
						</el-table-column>
						<el-table-column label="电梯注册号" max-width="140">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.register_code" placement="top">
									<span class="speSpan">{{scope.row.register_code}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电梯简称" max-width="130">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.internal_no" placement="top">
									<span class="speSpan">{{scope.row.internal_no}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电梯内部编号" max-width="130">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="String(scope.row.id)" placement="top">
									<span class="speSpan">{{scope.row.id}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电梯类型" max-width="140">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.create_time" placement="top">
									<span class="speSpan">{{scope.row.create_time}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="pag">
						<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
						 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</el-row>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeScondDilog">取 消</el-button>
				<el-button type="primary" @click='ensure'>确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: ['innerVisible'],
		mounted() {
			this.getSecondDialogMess()
		},
		data() {
			return {
				loading: true,
				mainCompany: '',
				mainCompanyArr: [],
				userCompany: '',
				userCompanyArr: [],
				searchQuery: '',
				tableData: [],
				page: 1,
				page_size: 10,
				total: 0,
			}
		},
		methods: {
			closeScondDilog() {
				this.$emit('closeScondDilog')
			},
			//第二层dialog搜索注册代码
			find() {

			},
			//表格
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			selectChange() {

			},
			//分页器
			handleSizeChange(size) {
				// this.loading = true
				this.page_size = size

			},
			handleCurrentChange(page) {
				// this.loading = true
				this.page = page
			},
			getSecondDialogMess() {
				console.log(1231221)
				this.loading = false
			},
			//确认
			ensure() {

			}
		}
	}
</script>

<style lang="less" scoped>
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}
	.tableBox {
		height: 80%;
		overflow-y: auto;
		overflow-x: hidden;
	}
</style>
